<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">

<body>
  <style is="custom-style">
    :root {
      --color: blue;
      --anim-color: red;
    }

    .alternative {
      --color: green;
      --anim-color: blue;
    }
  </style>

  <dom-module id="test-keyframes">
    <template><style>
      :host {
        display: block;
        color: var(--color);
        animation: foo 3s;
        height: 20px;
      }

      @keyframes foo {
        0% {
          background: var(--anim-color);
        }

        100% {
          background: yellow;
        }
      }
    </style><content></content></template>
    <script>
      Polymer({
        is: 'test-keyframes'
      });

    </script>
  </dom-module>

  <p>Text should be the color blue. Background should animate from the color red to the color yellow, and then become transparent.</p>
  <test-keyframes>red</test-keyframes>

  <p>Text should be the color green. Background should animate from the color blue to the color yellow, and then become transparent.</p>
  <test-keyframes class="alternative">blue</test-keyframes>

</body>
